Avmystifisering av Visual Viewport API: Avslører informasjon om layout-viewporten

Visual Viewport API er et kraftig verktøy for webutviklere som har som mål å skape virkelig responsive og tilpasningsdyktige webopplevelser. Det lar deg programmatisk få tilgang til og manipulere den visuelle viewporten – den delen av en nettside som for øyeblikket er synlig for brukeren. Mens den visuelle viewporten i seg selv er det direkte synlige området, gir API-et også viktig informasjon om layout-viewporten, som representerer hele nettsiden, inkludert områder som for øyeblikket er utenfor skjermen. Å forstå layout-viewporten er avgjørende for mange avanserte webutviklingsteknikker, spesielt når man jobber med mobile enheter og varierende skjermstørrelser.

Hva er layout-viewporten?

Layout-viewporten er, konseptuelt sett, det fulle lerretet som nettsiden din blir gjengitt på. Den er vanligvis større enn den visuelle viewporten, spesielt på mobile enheter. Nettleseren bruker layout-viewporten til å bestemme den opprinnelige størrelsen og skalaen på siden. Tenk på det som den underliggende dokumentstørrelsen før zooming eller rulling blir brukt. Den visuelle viewporten, derimot, er vinduet som brukeren ser layout-viewporten gjennom.

Forholdet mellom den visuelle og layout-viewporten defineres av viewport-meta-taggen i HTML-koden din. Uten en korrekt konfigurert viewport-meta-tagg, kan mobile nettlesere gjengi nettstedet ditt som om det var designet for en mye mindre skjerm, noe som tvinger brukeren til å zoome inn for å lese innholdet. Dette fører til en dårlig brukeropplevelse.

For eksempel, tenk deg et nettsted designet med en layout-viewport på 980 piksler i bredden. På en mobil enhet med en fysisk skjermbredde på 375 piksler, kan nettleseren i utgangspunktet gjengi siden som om den ble sett på en 980-piksel bred skjerm. Brukeren ville da måtte zoome inn for å se innholdet tydelig. Med Visual Viewport API kan du få tilgang til størrelsen og posisjonen til begge viewportene, slik at du dynamisk kan justere layout og styling for å optimalisere for brukerens enhet.

Tilgang til layout-viewport-informasjon med Visual Viewport API

Visual Viewport API tilbyr flere egenskaper som lar deg hente informasjon om layout-viewporten. Disse egenskapene er tilgjengelige gjennom window.visualViewport-objektet (sørg for å sjekke nettleserstøtte før du bruker det):

• offsetLeft: Avstanden (i CSS-piksler) fra venstre kant av layout-viewporten til venstre kant av den visuelle viewporten.
• offsetTop: Avstanden (i CSS-piksler) fra toppen av layout-viewporten til toppen av den visuelle viewporten.
• pageLeft: x-koordinaten (i CSS-piksler) til venstre kant av den visuelle viewporten i forhold til sidens opprinnelse. Merk: denne verdien kan inkludere rulling.
• pageTop: y-koordinaten (i CSS-piksler) til toppen av den visuelle viewporten i forhold til sidens opprinnelse. Merk: denne verdien kan inkludere rulling.
• width: Bredden (i CSS-piksler) på den visuelle viewporten.
• height: Høyden (i CSS-piksler) på den visuelle viewporten.
• scale: Den nåværende zoomfaktoren. En verdi på 1 indikerer ingen zoom. Verdier større enn 1 indikerer innzooming, og verdier mindre enn 1 indikerer utzooming.

Selv om disse egenskapene er direkte relatert til den *visuelle* viewporten, er de avgjørende for å forstå forholdet mellom den visuelle og layout-viewporten. Å kjenne til scale, offsetLeft og offsetTop lar deg utlede informasjon om den generelle størrelsen og posisjonen til layout-viewporten i forhold til den visuelle viewporten. For eksempel kan du beregne dimensjonene til layout-viewporten ved hjelp av følgende formel (men vær oppmerksom på at dette er en *tilnærming*):

 
 layoutViewportWidth = visualViewport.width / visualViewport.scale;
 layoutViewportHeight = visualViewport.height / visualViewport.scale;
 
 

Husk at disse beregningene er tilnærminger og kanskje ikke er helt nøyaktige på grunn av nettleserimplementeringer og andre faktorer. For den nøyaktige størrelsen på layout-viewporten, bruk `document.documentElement.clientWidth` og `document.documentElement.clientHeight`.

Praktiske eksempler og bruksområder

La oss utforske noen praktiske scenarioer der forståelse av layout-viewport-informasjon er uvurderlig:

1. Dynamisk skalering og tilpasning av innhold

Tenk deg at du bygger en webapplikasjon som trenger å vise store bilder eller interaktive kart. Du vil sikre at innholdet alltid passer innenfor det synlige skjermområdet, uavhengig av enhet eller zoomnivå. Ved å få tilgang til width-, height- og scale-egenskapene til den visuelle viewporten, kan du dynamisk justere størrelsen og posisjoneringen av innholdet ditt for å forhindre overløp eller beskjæring. Dette er spesielt viktig for ensidesapplikasjoner (SPA-er) som i stor grad er avhengige av JavaScript for gjengivelse.

Eksempel:

function adjustContent() {
 if (!window.visualViewport) return;
 const visualViewportWidth = window.visualViewport.width;
 const visualViewportHeight = window.visualViewport.height;
 const visualViewportScale = window.visualViewport.scale;

 const contentElement = document.getElementById('myContent');

 // Calculate the desired width and height based on the visual viewport
 const desiredWidth = visualViewportWidth / visualViewportScale;
 const desiredHeight = visualViewportHeight / visualViewportScale;

 // Apply the styles
 contentElement.style.width = desiredWidth + 'px';
 contentElement.style.height = desiredHeight + 'px';
}

// Call adjustContent on initial load and when the visual viewport changes
adjustContent();
window.visualViewport.addEventListener('resize', adjustContent);

Dette kodeutdraget henter dimensjonene og skalaen til den visuelle viewporten og bruker dem til å beregne ønsket bredde og høyde for et innholdselement. Deretter bruker den disse stilene på elementet, og sikrer at det alltid passer innenfor det synlige skjermområdet. resize-hendelseslytteren sørger for at innholdet justeres på nytt når den visuelle viewporten endres (f.eks. på grunn av zooming eller orienteringsendringer).

2. Implementering av tilpasset zoom-funksjonalitet

Selv om nettlesere tilbyr innebygd zoom-funksjonalitet, kan det hende du vil implementere egne zoom-kontroller for en mer skreddersydd brukeropplevelse. For eksempel kan du ønske å lage zoom-knapper som zoomer inn i bestemte trinn eller implementere en zoom-glidebryter. Visual Viewport API lar deg få tilgang til og manipulere zoomnivået (scale) programmatisk.

Eksempel:

function zoomIn() {
 if (!window.visualViewport) return;
 const currentScale = window.visualViewport.scale;
 const newScale = currentScale + 0.2; // Increase zoom by 20%

 // Limit the maximum zoom level
 if (newScale <= 5) {
 window.visualViewport.scale = newScale;
 }
}

function zoomOut() {
 if (!window.visualViewport) return;
 const currentScale = window.visualViewport.scale;
 const newScale = currentScale - 0.2; // Decrease zoom by 20%

 // Limit the minimum zoom level
 if (newScale >= 0.2) {
 window.visualViewport.scale = newScale;
 }
}

// Attach these functions to zoom buttons
document.getElementById('zoomInButton').addEventListener('click', zoomIn);
document.getElementById('zoomOutButton').addEventListener('click', zoomOut);

Dette kodeutdraget definerer to funksjoner, zoomIn og zoomOut, som øker eller reduserer zoomnivået med en fast mengde. Det inkluderer også grenser for å forhindre at brukeren zoomer for langt inn eller for langt ut. Disse funksjonene kobles deretter til knapper, slik at brukeren kan kontrollere zoomnivået gjennom egne kontroller.

3. Skape engasjerende opplevelser for kart og spill

Nettbaserte kart og spill krever ofte presis kontroll over viewporten og skalering. Visual Viewport API gir de nødvendige verktøyene for å skape engasjerende opplevelser ved å la deg dynamisk justere viewporten basert på brukerinteraksjoner. For eksempel, i en kartapplikasjon, kan du bruke API-et til å zoome jevnt inn og ut av kartet mens brukeren ruller eller kniper på skjermen.

4. Håndtering av elementer med fast posisjon

Elementer med position: fixed er posisjonert i forhold til viewporten. Når brukeren zoomer inn, krymper den visuelle viewporten, men det faste elementet justeres kanskje ikke riktig hvis du bare bruker CSS. Visual Viewport API kan hjelpe til med å justere posisjonen og størrelsen på faste elementer for å holde dem konsistente med den visuelle viewporten.

5. Håndtering av tastaturproblemer på mobile enheter

På mobile enheter fører ofte visning av tastaturet til at den visuelle viewporten endrer størrelse, noe som noen ganger skjuler inndatafelt eller andre viktige grensesnittelementer. Ved å lytte til resize-hendelsen til den visuelle viewporten, kan du oppdage når tastaturet vises og justere layouten deretter for å sikre at inndatafeltene forblir synlige. Dette er avgjørende for å gi en sømløs og brukervennlig opplevelse på mobile enheter. Dette er også viktig for å overholde WCAG-retningslinjene.

Eksempel:

window.visualViewport.addEventListener('resize', () => {
 const keyboardVisible = window.visualViewport.height < window.innerHeight;

 if (keyboardVisible) {
 // Adjust the layout to ensure the input field is visible
 document.getElementById('myInputField').scrollIntoView();
 } else {
 // Revert the layout adjustments
 }
});

Dette eksemplet sjekker om høyden på den visuelle viewporten er mindre enn vindushøyden, noe som indikerer at tastaturet sannsynligvis er synlig. Deretter bruker det scrollIntoView()-metoden for å rulle inndatafeltet til syne, og sikrer at det ikke blir skjult av tastaturet. Når tastaturet lukkes, kan layoutjusteringene tilbakestilles.

Nettleserstøtte og hensyn

Visual Viewport API har god støtte i moderne nettlesere. Det er imidlertid avgjørende å sjekke for nettleserstøtte før du bruker det i koden din. Du kan gjøre dette ved å sjekke om window.visualViewport-objektet eksisterer. Hvis API-et ikke støttes, kan du bruke alternative teknikker, som media queries eller window.innerWidth og window.innerHeight, for å oppnå lignende resultater, selv om disse metodene kanskje ikke er like presise.

Eksempel:

if (window.visualViewport) {
 // Use the Visual Viewport API
} else {
 // Use alternative techniques
}

Det er også viktig å være klar over de potensielle ytelsesimplikasjonene ved å bruke Visual Viewport API. Å få tilgang til viewport-egenskapene og reagere på viewport-endringer kan utløse layout reflows, noe som kan påvirke ytelsen, spesielt på mobile enheter. Optimaliser koden din for å minimere unødvendige reflows og sikre en jevn brukeropplevelse. Vurder å bruke teknikker som debouncing eller throttling for å begrense frekvensen av oppdateringer.

Hensyn til tilgjengelighet

Når du bruker Visual Viewport API, er det viktig å ta hensyn til tilgjengelighet. Sørg for at nettstedet ditt forblir brukbart og tilgjengelig for brukere med nedsatt funksjonsevne, uavhengig av enhet eller zoomnivå. Unngå å stole utelukkende på visuelle signaler og gi alternative måter for brukere å samhandle med innholdet ditt. For eksempel, hvis du bruker egne zoom-kontroller, gi tastatursnarveier eller ARIA-attributter for å gjøre dem tilgjengelige for brukere som ikke kan bruke en mus. Riktig bruk av viewport-meta-tagger og Visual Viewport API kan forbedre lesbarheten for brukere med nedsatt syn ved å la dem zoome inn uten å ødelegge layouten.

Internasjonalisering og lokalisering

Vurder virkningen av forskjellige språk og lokaliteter på nettstedets layout og responsivitet. Tekstlengden kan variere betydelig mellom språk, noe som kan påvirke størrelsen og posisjoneringen av elementer på siden. Bruk fleksible layouter og responsive designteknikker for å sikre at nettstedet ditt tilpasser seg elegant til forskjellige språk. Visual Viewport API kan brukes til å oppdage endringer i viewport-størrelsen på grunn av språkspesifikk tekstgjengivelse og justere layouten deretter.

For eksempel, på språk som tysk, har ord en tendens til å være lengre, noe som potensielt kan forårsake layoutproblemer hvis det ikke håndteres riktig. I høyre-til-venstre (RTL)-språk som arabisk eller hebraisk, må hele layouten speilvendes. Sørg for at koden din er riktig internasjonalisert og lokalisert for å støtte et globalt publikum.

Beste praksis og tips

• Sjekk for nettleserstøtte: Sjekk alltid om Visual Viewport API støttes før du bruker det.
• Optimaliser for ytelse: Minimer unødvendige layout reflows for å unngå ytelsesproblemer.
• Ta hensyn til tilgjengelighet: Sørg for at nettstedet ditt forblir tilgjengelig for brukere med nedsatt funksjonsevne.
• Test på forskjellige enheter: Test nettstedet ditt på en rekke enheter og skjermstørrelser for å sikre at det er virkelig responsivt.
• Bruk Debouncing og Throttling: Begrens frekvensen av oppdateringer for å forbedre ytelsen.
• Prioriter brukeropplevelse: Ha alltid brukeropplevelsen i tankene når du bruker Visual Viewport API.

Konklusjon

Visual Viewport API gir et kraftig sett med verktøy for å bygge responsive og tilpasningsdyktige webopplevelser. Ved å forstå layout-viewporten og utnytte API-ets egenskaper, kan du lage nettsteder som ser bra ut og fungerer feilfritt på enhver enhet. Husk å ta hensyn til nettleserstøtte, ytelse, tilgjengelighet og internasjonalisering når du bruker API-et for å sikre at nettstedet ditt gir en positiv opplevelse for alle brukere over hele verden. Eksperimenter med API-et, utforsk dets muligheter og lås opp nye muligheter for å skape engasjerende og immersive webapplikasjoner.

Videre utforskning: Utforsk andre funksjoner i Viewport API som rullehendelser, berøringshendelser og integrasjon med andre web-API-er.